<template>
    <view class="avatar-box">
        <view class="vip_img" v-if="userInfo.vip>0">
            <u-image  :src="filterImg(userInfo.vip)" width="60rpx" height="60rpx" shape="circle"></u-image>
        </view>
        <u-avatar :src="userInfo.wxAvatar" :class="userInfo.vip>0?'vip_active' : ''" :size="60"  @click="handleAvatar"></u-avatar>
        <view class="userId">
            <view class="phonenumber" @click="handleAvatar"> {{userInfo.nickName}} </view>
            <view class="dis_f_l_c">
                <view>
                    <u-tag :text="filterText(userInfo.vip)" size="mini" :type="tagType[userInfo.vip]"></u-tag>
                </view>
                <view class="m_l_5" v-if="userInfo.proxyRegion">
                    <u-tag :text="userInfo.proxyRegion+'代理'" size="mini" type="success"></u-tag>
                </view>
                <view class="m_l_5">
                    <u-tag v-if="userInfo.ifCardReview==1" text="未实名" size="mini" type="info"></u-tag>
                    <u-tag v-if="userInfo.ifCardReview==2" text="实名待审核" size="mini" type="warning"></u-tag>
                    <u-tag v-if="userInfo.ifCardReview==3" text="已实名" size="mini" type="success"></u-tag>
                    <u-tag v-if="userInfo.ifCardReview==4" text="实名未通过" size="mini" type="error"></u-tag>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import {getByKeyApi} from "@/sheep/api";

export default {
    name: "index",
    props:{
        userInfo:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            list:[],
            tagType:['info','warning','error','success']
        }
    },
    mounted() {
        this.getVipList()
    },
    methods: {
        async getVipList() {
            let res = await getByKeyApi("vip");
            this.list = res.data;
            console.log("list", this.list);
        },
        handleAvatar(){
            this.$emit('handleAvatar')
        },
        filterText(text){
            return this.list.find(item=>item.sortNo==text)?.configName
        },
        filterImg(text){
            return this.list.find(item=>item.sortNo==text).url
        }
    }
}
</script>

<style scoped lang="scss">
.avatar-box {
    position: relative;
    height: 50%;
    display: flex;
    margin-bottom: 20rpx;
    .vip_img{
        position: absolute;
        left: -11px;
        top: -10px;
        z-index: 1;
    }
    .vip_active{
        border: 4rpx solid #E1BC6D;
    }
    .userId {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .phonenumber {
            display: flex;
            align-items: center;
            font-weight: 700;
        }
    }
}
</style>
